import { reactive, defineComponent } from "vue";
import { useLoginState, LoginStateEnum } from "../utils/useLogin";
import { setToken } from "@/utils/auth";
import { useRouter } from "vue-router";
import LoginTitle from "./login-title";
import "../login.scss";

/** 登录表单 */
const loginForm = defineComponent({
  setup() {
    const { setLoginState } = useLoginState();
    const router = useRouter();
    /** 用户登录参数 */
    const loginParams = reactive({
      userName: "",
      passWord: "",
      checked: false,
    });

    /** 表单提交 */
    const submit = () => {
      // TODO: 模拟保存token
      setToken("234234234");
      console.log(22222222222, router);
      router.push({
        path: "/",
      });
      console.log(loginParams.userName);
    };

    /** 渲染函数 */
    return () => (
      <div>
        {LoginTitle("用户登录")}
        <el-form class="login-form">
          <el-form-item>
            <el-input
              class="login-input"
              v-model={loginParams.userName}
              placeholder="请输入用户名"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item>
            <el-input
              class="login-input"
              v-model={loginParams.passWord}
              placeholder="请输入密码"
              show-password
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item>
            <div class="flex-center">
              <el-checkbox v-model={loginParams.checked}>记住密码</el-checkbox>
              <el-button
                text
                type="primary"
                onClick={() => setLoginState(LoginStateEnum.RESET_PASSWORD)}
              >
                忘记密码?
              </el-button>
            </div>
            <el-button
              class="login-btn"
              size="large"
              type="primary"
              onClick={submit}
            >
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    );
  },
});

export default loginForm;
